<template>
  <div class="demo">
    <FireWorks
        bgImg="https://upload-bbs.miyoushe.com/upload/2021/08/11/291356697/13ba1dad08865b5f24cdb55b3b1d3685_308203621414115555.png"
        ref="FireWorksRef"
        :shape="['irregularity']"
        :autoFire="auto"
    >
      <div>
        <button @click="manualSend">手动发射</button>
        <button @click="auto = !auto">停止/开始自动播放</button>
      </div>
    </FireWorks>
  </div>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({
  name: "fire-works-demo",
  inheritAttrs: false,
})

const FireWorksRef = ref()

const auto = ref(false)

function manualSend() {
  FireWorksRef.value?.fire({
    x: 300, // 起始坐标--x
    y: 0,  // 起始坐标--y
    end: 350, // 爆炸位置
    radius: 3, // 烟花半径
    color: '#09c', // 颜色
    speed: 2, // 速度
    // 到达爆炸位置调用
    callback: (option) => {
      // 获取配置
      const options = FireWorksRef.value?.getShape(option, ['irregularity', 'circle'])
      // 创建动画
      FireWorksRef.value?.createShards(options)
    }
  })
}
</script>

<style scoped>
.demo {
  width: 100%;
  height: 500px;
}
</style>